<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="600px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="80px" @keyup.enter.native="dataFormSubmit()">

            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="temp.roleName" placeholder="角色名称" />
            </el-form-item>

            <el-form-item label="备注" prop="remark">
                <el-input v-model="temp.remark" placeholder="备注" />
            </el-form-item>

            <el-row v-if="roleRadio == 1">
                <el-col :span="11" style="max-height:150px;overflow-y:auto">
                    <el-form-item size="mini" label="授权" prop="shouquan">
                        <el-tree ref="menuListTree" :data="menuList" :props="menuListTreeProps" node-key="menuId"
                            @check-change="menuListTreeCurrentChangeHandle" :default-expand-all="false" show-checkbox />
                    </el-form-item>
                </el-col>
                <el-col :span="2" />
                <el-col :span="11" style="max-height:200px;overflow-y:auto">
                    <el-form-item size="mini" label="部门">
                        <el-tree ref="branchListTree" :data="branchList" :props="menuListTreeProps" node-key="deptId"
                            :default-expand-all="true" show-checkbox />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { treeDataTranslate } from '@/utils'
import { getRoleInfo, getMenuLists, createRoleList, updateRoleList, selectSysDept } from '@/api/permission'
export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '新增',
                update: '修改'
            }
            return textMap[type]
        }
    },
    data () {
        return {
            visible: false,
            roleRadio: 1, // 角色类型
            dialogStatus: '', // 弹框新增或者修改
            temp: { // 表单数据
                roleId: '',
                roleName: '',
                remark: '',
                deptId: '',
                shouquan: ''
            },
            rule: {
                roleName: [
                    { required: true, message: '角色名称不能为空', trigger: 'blur' }
                ],
                shouquan: [
                    { required: true, message: '部门授权不能为空', trigger: 'blur' }
                ]
            },
            menuList: [], // 菜单树 数据
            branchList: [], // 部门树 数据
            menuListTreeProps: {
                label: 'name',
                children: 'children'
            }
        }
    },
    created () {
        this.getParentMenuList()
        this.getParentBranchList()
    },
    methods: {
        // 初始化
        init (status, param) {
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })

        },
        create () {
            this.resetTemp() // 清空表单
        },
        async update (param) {
            // let data = Object.assign({}, param)  .//从上一页带过来当前的数据
            const { data, code } = await getRoleInfo(param.roleId) // 从后台获取当前的的数据
            // 成功
            this.temp.roleId = data.roleId
            this.temp.roleName = data.roleName
            this.temp.remark = data.remark
            data.menuIdList && this.$refs.menuListTree.setCheckedKeys(data.menuIdList)
            data.deptIdList && this.$refs.branchListTree.setCheckedKeys(data.deptIdList)
        },
        // 新增数据清空表单数据
        resetTemp () {
            this.temp = {
                roleId: '',
                roleName: '',
                remark: '',
                deptId: ''
            }
            this.$refs.menuListTree.setCheckedKeys([])
            this.$refs.branchListTree.setCheckedKeys([])
        },
        // 获取所有菜单
        async getParentMenuList () {
            const { data, code } = await getMenuLists()
            // this.menuList = []
            this.menuList = treeDataTranslate(data, 'menuId')
        },
        // 获取所有部门
        async getParentBranchList () {
            const { data, code } = await selectSysDept()
            // this.branchList = []
            this.branchList = treeDataTranslate(data, 'deptId')
        },
        // 上级菜单树选中
        menuListTreeCurrentChangeHandle (data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
            // this.temp.parentId = data.menuId
            // this.temp.parentName = data.name
        },
        // handleCheckChange (data, checked, indeterminate) {
        //     console.log(data, checked, indeterminate);
        // },
        // 表单提交
        dataFormSubmit () {
            this.temp.shouquan = this.$refs.menuListTree.getCheckedKeys()
            this.$refs['temp'].validate(async (valid) => {
                //  || this.$refs.branchListTree.getCheckedKeys().length == 0  部门授权
                if (this.$refs.menuListTree.getCheckedKeys().length == 0) {
                    this.$message({
                        message: '授权不能为空',
                        type: 'error',
                        duration: 1000,
                        onClose: () => {

                        }
                    })
                    return
                }
                if (!valid) return;
                //获取选中 和 半选 
                // let menuIdList = this.$refs.menuListTree.getCheckedKeys().concat(this.$refs.menuListTree.getHalfCheckedKeys())
                const params = {
                    'roleId': this.temp.roleId || undefined,
                    'roleName': this.temp.roleName,
                    'remark': this.temp.remark,
                    // 'menuIdList': menuIdList,
                    'menuIdList': this.$refs.menuListTree.getCheckedKeys(),
                    'deptIdList': this.$refs.branchListTree.getCheckedKeys()
                }
                const textMap = {
                    create: createRoleList, // 新增
                    update: updateRoleList // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        }

    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
